<!DOCTYPE html>
<html>

<head>
    <link rel="shortcut icon" href="assets/img/logo.png">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to UR Blog</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" href="assets/css/theme1.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link type="text/css" href="assets/css/demo.css" rel="stylesheet">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-transparent navbar-dark bg-dark py-4">
        <div class="container">
            <a class="navbar-brand" href="blog_list.html"><strong>UR</strong> Blog</a>
            <button class="navbar-toggler" type="button" data-action="offcanvas-open" data-target="#navbar_main"
                aria-controls="navbar_main" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse offcanvas-collapse" id="navbar_main">
                <ul class="navbar-nav ml-auto align-items-lg-center">
                    <h6 class="dropdown-header font-weight-600 d-lg-none px-0">Menu</h6>
                    <li class="nav-item ">
                    </li>
                    <li class="nav-item dropdown">
                    </li>
                    <li class="nav-item">
                    </li>
                    </li>
                    <div class="dropdown-divider d-lg-none my-4"></div>
                    <h6 class="dropdown-header font-weight-600 d-lg-none px-0">Social Media</h6>
                    <li class="nav-item">
                        <a class="nav-link nav-link-icon" href="https://gitee.com/liu-Nox" target="_blank"><i
                            class="fab fa-github"></i><span class="ml-2 d-lg-none">Github</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <main class="main">
        <section class="py-xl bg-cover bg-size--cover"
            style="background-image: url('assets/images/backgrounds/img-1.jpg')">
            <span class="mask bg-primary alpha-6"></span>
            <div class="container d-flex align-items-center no-padding">
                <div class="col">
                    <div class="row justify-content-center">
                        <div class="col-lg-4">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <button type="button" class="btn btn-primary btn-nobg btn-zoom--hover mb-5">
                                        <span class="btn-inner--icon" onclick="location.href='reg.html'"><i
                                                class="fas fa-arrow-left"></i>注册</span>
                                    </button>
                                    <span class="clearfix"></span>
                                    <img src="assets/images/brand/icon.png" style="width: 50px;">
                                    <h4 class="heading h3 text-white pt-3 pb-5">欢迎回来,<br>
                                        请登录你的账号.</h4>
                                    <div class="form-group">
                                        <input type="username" class="form-control" id="username" name="username"
                                            placeholder="账号">
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control" id="password" name="password"
                                            placeholder="密码">
                                    </div>
                                    <div class="form-group" style="display: flex;">
                                        <input type="text" class="form-control" id="identify-input"
                                            name="identify-input" placeholder="验证码" style="width: 70%;">
                                        <img name="identify-img" id="identify-img" src="/user/code"
                                            style="margin: 5px;">
                                    </div>
                                    <div class="text-right mt-4"><a href="forget_pw.html" class="text-white">忘记密码?</a></div>

                                    <button type="submit" class="btn btn-block btn-lg bg-white mt-4"
                                        onclick="login()">Sign in</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer class="pt-5 pb-3 footer  footer-dark bg-tertiary">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-4">
                    <div class="pr-lg-5">
                        <h1 class="heading h6 text-uppercase font-weight-700 mb-3"><strong>UR</strong> Blog</h1>
                        <p>This blog is the first SSM project I did, which will be developed in 2023, and there is still
                            a lot of room for improvement.</p>
                    </div>
                </div>
            </div>
            <hr>
            <div class="d-flex align-items-center">
                <ul class="nav ml-lg-auto">
                    <li class="nav-item">
                        <div style="margin-bottom: -22px; margin-left: -20px;">作者：</div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-github"
                        viewBox="0 0 16 16" onclick="location.href='https://gitee.com/liu-Nox' " style="width: 90px;">
                        <path
                            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
                    </svg>
                    <svg style="margin-left: -10px;" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                        class="bi bi-bootstrap-fill" viewBox="0 0 16 16"
                        onclick="location.href='https://blog.csdn.net/lzhNox?type=blog'">
                        <path
                            d="M6.375 7.125V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H6.375v2.725z" />
                        <path
                            d="M4.002 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4h-8zm1.06 12V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396H5.062z" />
                    </svg>
                    </li>
                </ul>
            </div>
        </div>
    </footer>
    <!-- Core -->
    <script src="js/jquery_min.js"></script>
    <script src="assets/vendor/popper/popper.min.js"></script>
    <script src="assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Page plugins -->
    <script src="assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
    <script src="assets/vendor/input-mask/input-mask.min.js"></script>
    <script src="assets/vendor/nouislider/js/nouislider.min.js"></script>
    <script src="assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
    <!-- Theme JS -->
    <script src="assets/js/theme1.js"></script>
</body>

<script>
    $("#identify-img").on('click', function () {
        // 点击验证码那个图片的时候，我们输入的验证码那个框就会清空
        $('#identify-input').val('')
        //而且我们点击验证码的时候，希望它可以改变验证码内容，其实是通过发送新请求来改变验证码内容
        $('#identify-img').attr('src', 'user/code?' + Math.random())
    })
    function login() {
        //1.非空校验
        var username = jQuery("#username");
        var password = jQuery("#password");
        var code = jQuery("#identify-input");
        if (username.val() == "") {
            alert("请输入用户名！");
            return false;
        }
        if (password.val() == "") {
            alert("请输入密码！");
            return false;
        }
        if (code.val() == "") {
            alert("请输入验证码！");
            return false;
        }
        //2.发送ajax给后端
        jQuery.ajax({
            url: "/user/login",
            type: "post",
            data: {
                username: username.val(),
                password: password.val(),
                code: code.val()
            },
            success: function (result) {
                if (result.code == 200 && result.data == 1) {
                    alert("登录成功！")
                    location.href = "blog_list.html"
                } else if (result.data == 0) {
                    alert("用户名或密码输入错误!");
                    $('#identify-input').val('')
                    $('#identify-img').attr('src', 'user/code?' + Math.random())
                    username.focus();
                } else if (result.data == -1) {
                    alert("验证码输入错误!");
                    $('#identify-input').val('')
                    $('#identify-img').attr('src', 'user/code?' + Math.random())
                    code.focus();
                }
            }
        })
    }
</script>

</html>